<template>
  <a-modal
    title='选择位置'
    :visible='visible'
    width='800px'
    centered
    @ok='submitTap'
    @cancel='close'
  >
    <div class='map-search'>
      <a-select
        show-search
        v-model='addressId'
        style='width: 100%'
        placeholder='请输入位置信息'
        :default-active-first-option='false'
        :show-arrow='false'
        :filter-option='false'
        :not-found-content='null'
        @search='searchChange'
        @change='selectChange'
      >
        <a-select-option v-for='item in cityList' :key='item.id'>
          {{ item.title }}
        </a-select-option>
      </a-select>
    </div>
    <div :id='id' style='width: 100%;height: 400px;'></div>
  </a-modal>
</template>

<script>
import { map } from '@/api/qqMap.js'
import debounce from 'lodash/debounce'
export default {
  props: {
    location: {
      type: Object,
      default: () => ({ lat: 39.916527, lng: 116.397128 })
    }
  },
  data() {
    return {
      visible: false,
      id: '',
      addressId: undefined,
      cityList: [], // 搜索的城市信息
      dataSource: [],
      mapObj: {},
      addressInfo: {}, // 选择的地址信息
      markerLayer: {}
    }
  },
  mounted() {
    this.id = Math.floor(Math.random() * 1000000)
  },
  methods: {
    show() {
      this.visible = true
      if (!Object.keys(this.mapObj).length) {
        setTimeout(() => {
          this.initMap(this.location)
        }, 100)
      }
    },
    close() {
      this.$emit('close')
      this.visible = false
      this.mapObj.off('click', this.clickHandler)
    },
    // 搜索
    searchChange: debounce(function(keyword) {
      map({
        keyword: keyword,
        key: 'GSYBZ-BCFCT-TJIXW-VUAAS-ROZDJ-6SFEW'
      }).then((res) => {
        this.cityList = res.data
      })
    }, 500),
    // 选择城市
    selectChange(value) {
      this.addressId = value
      const findRes = this.cityList.find((item) => item.id == value)
      this.addressInfo = {
        ...findRes,
        lat: findRes.location.lat,
        lng: findRes.location.lng
      }
      this.markerLayer.id && this.markerLayer.setGeometries([])
      this.mapObj.setCenter(new TMap.LatLng(findRes.location.lat, findRes.location.lng))
      this.createMarker(this.addressInfo)
    },
    createMarker(point) {
      // 创建并初始化MultiMarker
      this.markerLayer = new TMap.MultiMarker({
        map: this.mapObj, //指定地图容器
        // 样式定义
        styles: {
          // 创建一个styleId为"myStyle"的样式（styles的子属性名即为styleId）
          myStyle: new TMap.MarkerStyle({
            width: 22, // 点标记样式宽度（像素）
            height: 32, // 点标记样式高度（像素）
            // 焦点在图片中的像素位置，一般大头针类似形式的图片以针尖位置做为焦点，圆形点以圆心位置为焦点
            anchor: {
              x: 16,
              y: 32
            }
          })
        },
        // 点标记数据数组
        geometries: [
          {
            id: '1', // 点标记唯一标识，后续如果有删除、修改位置等操作，都需要此id
            styleId: 'myStyle', // 指定样式id
            position: new TMap.LatLng(point.lat, point.lng), // 点标记坐标位置
            properties: {
              // 自定义属性
              title: point.title
            }
          }
        ]
      })
    },
    // 确认选择
    submitTap() {
      if (!this.addressInfo.id) {
        this.$message.error('请选择位置')
        return
      }
      this.visible = false
      this.$emit('success', this.addressInfo)
    },
    initMap(point) {
      // 定义地图中心点坐标
      let center = new TMap.LatLng(point.lat, point.lng)
      // 定义map变量，调用 TMap.Map() 构造函数创建地图
      this.mapObj = new TMap.Map(document.getElementById(this.id), {
        center: center, // 设置地图中心点坐标
        zoom: 16, // 设置地图缩放级别
        pitch: 0 // 设置俯仰角
        // rotation: 45    // 设置地图旋转角度
      })
      this.mapObj.on('click', (e) => {
        console.log(e)
      })
    },
    clickHandler(evt) {
      evt.latLng.lat = evt.latLng.lat.toFixed(8)
      evt.latLng.lng = evt.latLng.lng.toFixed(8)
      this.slectOption = {
        ...evt.latLng
      }
    }
  }
}
</script>

<style lang='less' scoped>
.map-search {
  margin-bottom: 20px;
}
</style>
